<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notifications</title>
</head>

<body>
  <button onclick="goToPromise()">授权</button>
  <button onclick="sendNotification()">发送通知</button>
  <script>
    function sendNotification() {
      if (Notification.permission === 'granted') {
        const notification = new Notification('测试', {
          body: '你好',
          // icon: 'https://www.example.com/icon.png'
        });
        // 让设备震动
        window.navigator.vibrate(200)
        notification.onclick = function () {
          window.open('https://www.baidu.com');
        };
      }
      else {
        Notification.requestPermission().then(function (permission) {
          if (permission === 'granted') {
            const notification = new Notification('测试', {
              body: '你好',
              // icon: 'https://www.example.com/icon.png'
            });
            // 让设备震动
            window.navigator.vibrate(200)
            notification.onclick = function () {
              window.open('https://www.baidu.com');
            };
          }
        });
      }
    }
    async function goToPromise() {
      let promise = await Notification.requestPermission();
      console.log(promise);
      if (promise === 'granted') { }

    }
  </script>
</body>

</html>